WDD = Ext.extend(Ext.util.Observable, {
	constructor: function(config){
		Ext.apply(this, config);
		WDD.superclass.constructor.call(this, config);
		
		Ext.onReady(this.init, this);
	}
	
	,init: function(){
		// create viewport
		var viewport = new Ext.Viewport({
			layout: 'border'
			,items: [
				this.getToolbar()
				,this.getView()
			]	
		});	
	}
	
	,getToolbar: function(){
		if(this.__toolbar) return this.__toolbar;
		
		this.__toolbar = new Ext.Toolbar({
			region: 'north'
			,height: 65
			,border: false
			,defaults: {xtype: 'buttongroup', columns: 10}
			,items: [
				{
					title: 'Contents'
					,ref: 'groupContent'
				},{
					title: 'Site'
					,ref: 'groupSite'
					//,items: [{text: 'Site', scale: 'large', iconCls: 'icon-site'}]
				},{
					title: 'Widgets'
					,ref: 'groupWidget'
					//,items: [{text: 'Widgets', scale: 'large'}]
				},{
					title: 'Miscellaneous'
					,ref: 'groupMiscellaneous'
					,items: [{text: 'Miscellaneous', scale: 'large'}]
				}
			]
			,plugins: this.toolbarPlugins	
		});
		
		return this.__toolbar;	
	}
	
	,getView: function(){
		if(this.__view) return this.__view;
			
		var site = new Site();
					
		this.__view = new Ext.Panel({
			region: 'center'
			,border: false
			,boxMinHeight: 400
			,autoScroll: true
			,listeners: {
				render: function(panel){
					panel.body.appendChild(site.getContainer());	
				}	
			}
		});
		
		return this.__view;	
	}
});

Ext.ns('WDD.Content', 'WDD.Site', 'WDD.Menu', 'WDD.Misc', 'WDD.Widget');